[][]Blank-Blank[][]

Pengunjung Jangan Lupa Follow...

Senin, 17 Januari 2011

Tips Cara Membuat Menu Tab View



Untuk menempatkan script ini tidaklah sulit anda hanya butuh ketelitian karna script membuat menu tab view ini lumayan banyak.
1. Login ke blogger anda lalu pilih menu "Layout --> Edit HTML"2. Berikutnya cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode
]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
4. Lihat text-text yang berwarna merah, ini keterangan untuk pengaturan Menu Tab View. pergantian warna dengan memasukkan kode warna dll.
5. Selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

6. Setelah itu "Di save"
7. Lalu klik menu "Page Elements"
8. PIlih "Add a Gadget" --> "HTML/Javascript" pada tempat yg akan di letakkan Manu Tab View ini.
9. Ini script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka2 atau text yang berwarna merah (260px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna biru Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna kunung adalah isi dari tabview tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Selamat mencoba.

Related Posts by Categories

Jumat, 14 Januari 2011

Tips Cara Bikin Banner

Bagi sobat-sobat blogger mungkin sudah lihai dalam memodifikasi blognya. Tapi buat newbie newbie mungkin masih awam dalam hal ini. Disini saya mau jelaskan tentang cara membuat banner di blog supaya lebih keren dan temen temen lainnya bisa langsung copas aja. Ada beberapa macam situs layanan bikin banner gratis salah satunya dan yang sering saya gunakan adalah cooltext.com karena sangat mudah sekali. Oke langsung aja ya langkah langkahnya sebagai berikut:


1.Kunjungi cooltext.com
2.Pilih contoh contoh banner lalu klik
3.Pada kolom Logo Text ganti dengan judul blog anda
4.Pada kolom Text Size ganti ukuran textnya sesuai keinginan anda
5.Pada Text Color ganti warna textnya sesuai keinginan anda
6.Background Image silahkan jika anda ingin menggantinya
7.kalo sudah selsai semua klik "render logo"
8.lalu klik "download image"
9.Simpan di PC anda
10.Lalu buka http://www.photobucket.com
11.daftar dulu klo sudah langsung login
12.Lalu klik "album & upload" lalu "choose file" pilih "from my computer" lalu pilih banner anda tadi
13. kalo proses upload sudah selsai arahkan mousenya ke gambar banner tadi lalu copy script yang ada di kolom HTML CODE ke notepad menjadi 2
14.tambahkan code ini <textarea cols="20" name="textarea"> sebelum kode banner anda yang ke 2 ke notepad tadi
15.lalu tambahkan kode ini </textarea> setelah kode banner anda yang ke 2 ke notepad tadi

kayak gini contohnya
CODE BANNER ANDA <textarea cols="20" name="textarea">CODE BANNER ANDA</textarea>

Setelah itu copy semua kode yang ada di notepad tadi lalu simpan di blog anda

Untuk blogspot anda masuk ke "LAYOUT"---->"ADD GADGETS"---->"HTML / Java Script" lalu SAVE. Selsai ;)

UPDATE!
Supaya banner jika diklik bisa langsung ke alamat situs maka, ganti URL pertama menjadi URL blog anda. CODE BANNER ANDA kan ada 2, misal : CODE BANNER ANDA (<a href="http://s385.photobucket.com/albums/oo293/tyo041084/?action=view&current=globe.gif" target="_blank"><img src="http://i385.photobucket.com/albums/oo293/tyo041084/globe.gif" border="0" alt="globe"></a>
) <textarea cols="20" name="textarea">CODE BANNER ANDA (<a href="http://s385.photobucket.com/albums/oo293/tyo041084/?action=view&current=globe.gif" target="_blank"><img src="http://i385.photobucket.com/albums/oo293/tyo041084/globe.gif" border="0" alt="globe"></a>) </textarea>

Huruf yg dicetak Warna Pink adalah CODE BANNER ANDA
Huruf yg berwarna merah adalah URL gambar anda. Ganti warna kode yg berwarna merah ini menjadi URL situs anda, misalnya ;www.aphetgenius.blogspot.com

Nanti jadinya akan seperti ini




Jgn lupa tukeran baner nya yaa... ^_^

Tips Membuat tulisan pada addres bar dapat bergerak

Terkait dengan postingan saya sebelumnya yaitu mengganti icon addres bar, kali ini cara mengganti tulisan pada addres bar agar dapat bisa bergerak sesuai keinginan sobat.
Klo icon pada addres aja bisa diganti kenapa tulisannya gak??jawabannya bisa. Tulisan pada address bar seperti pada blog saya, saya ganti sesuai kenginginan saya. Sobat pun bisa mempraktekkannya pada blog sobat

berikut caranya
pertama copy script dibawah ini :

<SCRIPT language='JavaScript'>
var txt="TEKS KAMU";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</SCRIPT>

Kemudian ganti "TEKS KAMU" pada script dengan teks yang akan kamu masukan.

Setelah itu copy kan script hasil editan kamu ke dalam blog :

Dasbor>tata letak>edit html>centang template explain widget

letakkan script tadi sebelum </head>


Gunakan F3 pada keyboard ketikkan untuk mencari </head>

Simpan dan liat hasilnya. Selamat mencoba...!!!